<template>
  <nav>
    <ul>
      <router-link to="/film/nowplaying" tag="li" active-class="active">正在热映</router-link>
      <router-link to="/film/comingsoon" tag="li" active-class="active">即将上映</router-link>
    </ul>
  </nav>
</template>

<style scoped lang="scss">
.active {
  color: red;
  border-bottom: 5px solid red;
}
ul {
  display: flex;
  li {
    flex: 1;
    height: 40px;
    line-height: 40px;
    text-align: center;
    list-style: none;
  }
}
.fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 40px;
  background: white;
}
</style>
